<script setup lang="ts">
import { reactive, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useQuery } from "@/hooks/init";
import { useShare } from "@/hooks/share";
import { note_info_api } from "@/api/guider_didi";
import { user_follow_api } from "@/package/guider/api/guider_didi";
import { data_api } from "@/api/my";
import { EV_USER } from "@/constant/event";
import { Account } from "@/utils/account";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import NavBack from "@/components/nav/back.vue";
import MediaVideo from "@/components/media/video.vue";

onLoad((options) => {
  useQuery<{ id: string }>(options as MiniApp.AppLaunchOption, (query) => {
    note_info_api({ id: query.id }).then((resp) => {
      infoData.video_url = resp.video_url;
      infoData.video_pic = resp.video_pic;
      infoData.author_avatar = resp.author_avatar;
      infoData.author_name = resp.author_name;
      infoData.source_content = resp.source_content;

      tempData.uid = resp.uid;
      tempData.guiderId = resp.guider_id;

      Account.isLogin && reloadMyData();

      shareOption.title = resp.title;
      shareOption.imageUrl = resp.video_pic;
    });

    tempData.id = query.id;

    shareOption.data = { id: query.id };
  });
});

const infoData = reactive({
  video_url: "",
  video_pic: "",
  author_avatar: "",
  author_name: "",
  source_content: "",
});

const guiderClick = () => {
  tempData.guiderId &&
    Router.navigateTo(
      `/package/guider/pages/detail/index?id=${tempData.guiderId}`
    );
};

const myData = reactive({ isFollow: false });
const followClick = () => {
  const fn = () => {
    myData.isFollow = !myData.isFollow;
    user_follow_api({ follow_id: tempData.uid, type: 3 }).then(() => {
      uni.$emit(EV_USER, { type: "follow", data: { id: tempData.uid } });
    });
  };

  Account.isLogin
    ? fn()
    : Account.login(() => {
        reloadMyData().then(() => {
          // 没有关注，则关注
          myData.isFollow || fn();
        });
      });
};

const reloadMyData = () => {
  return data_api<{ note_author_follow?: number[] }>({
    includes: "note_author_follow",
  }).then((resp) => {
    myData.isFollow = (resp.note_author_follow || []).includes(
      Number(tempData.uid)
    );
  });
};

const tempData = { id: "", uid: "", guiderId: "" };

const { onShareAppMessage, onShareTimeline, shareOption } = useShare(
  "/package/guider/pages/note/detail2"
);
</script>

<template>
  <NavBack navigationBarTextStyle="white" />

  <view class="detail-video">
    <MediaVideo
      :src="infoData.video_url"
      :poster="infoData.video_pic"
      autoplay
    />
  </view>

  <view class="detail-fixed">
    <view class="detail-user">
      <image
        class="detail-user-avatar"
        :src="infoData.author_avatar"
        mode="aspectFill"
        @click="guiderClick"
      />
      <view class="detail-user-name">{{ infoData.author_name }}</view>
      <view
        class="detail-user-follow"
        :style="{ opacity: myData.isFollow ? 0.4 : '' }"
        @click="followClick"
      >
        {{ myData.isFollow ? "已" : "" }}关注
      </view>
    </view>
    <view class="detail-content">{{ infoData.source_content }}</view>
  </view>
</template>

<style lang="scss">
page {
  background-color: #000000;
}

.detail-video {
  width: 100vw;
  height: calc(100vh - env(safe-area-inset-bottom));
}

.detail-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(110rpx + env(safe-area-inset-bottom));
}

.detail-user {
  position: absolute;
  left: 30rpx;
  top: -110rpx;
  display: flex;
  align-items: center;

  .detail-user-avatar {
    flex-shrink: 0;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }

  .detail-user-name {
    min-width: 0;
    margin-left: 20rpx;
    font-size: 36rpx;
    color: #ffffff;
    font-weight: bold;
  }

  .detail-user-follow {
    flex-shrink: 0;
    width: 100rpx;
    margin-left: 20rpx;
    font-size: 24rpx;
    color: #ffffff;
    line-height: 50rpx;
    text-align: center;
    border-radius: 30rpx;
    background-color: #ff7900;
  }
}

.detail-content {
  max-height: 92rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #f8f8f8;
  line-height: 46rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>